<template>
  <view class="order-box">
    <view class="order">
      <view class="order-left">
        <image :src="img"></image>
      </view>
      <view class="order-right">
        <view class="right-top">
          {{ title }}
        </view>
        <view class="right-center">
          {{ title1 }}
        </view>
        <view class="right-bottom">
          <text class="price">￥</text>{{ price }}
          <text class="num">x{{ num }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "order",
  props: {
    img: String,
    title: String,
    title1: String,
    price: Number,
    num: Number,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.order-box {
  // border: 1px solid red;
  .order {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    .order-left {
      width: 30%;
      image {
        width: 100%;
        height: 200rpx;
      }
    }
    .order-right {
      width: 68%;
      position: relative;
      padding: 10rpx;
      .right-top {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .right-center{
        margin-top: 20rpx;
        color: #b6b6b6;
        font-size: 26rpx;
      }
      .right-bottom{
        position: absolute;
        bottom: 5rpx;
        color: #fc492a;
        .price{
          font-size: 22rpx;
        }
        .num{
          color: #b6b6b6;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>